<template>
  <div class="preview-crouse">
    <div class="video-container">
      <div class="title">
        <span>课程试看</span>
        <svg @click="close" class="icon" aria-hidden="true">
          <use xlink:href="#iconicon-test2" />
        </svg>
      </div>
      <video playsinline id="video-box" class="video-js">
        <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
      </video>
    </div>
  </div>
</template>

<script>
import Video from "video.js";
import "video.js/dist/video-js.css";
export default {
  name: "TestTwo",
  data() {
    return {
      palyer: ""
    };
  },
  methods: {
    close() {
      this.$emit("close");
    },
    initVideo() {
      //初始化视频方法

      this.palyer = Video("video-box", {
        //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        controls: true,
        //自动播放属性,muted:静音播放
        // autoplay: true,
        //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: "auto",
        //设置视频播放器的显示宽度（以像素为单位）
        width: "800px",
        //设置视频播放器的显示高度（以像素为单位）
        height: "400px"
      });
    }
  },
  mounted() {
    this.initVideo();
  },
  destroyed() {
    this.palyer.dispose();
  }
};
</script>

<style lang="scss">
@media screen and (min-width: 1200px) {
  .preview-crouse {
    position: fixed;
    z-index: 999;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.6);
    .video-container {
      position: absolute;
      width: 700px;
      height: 500px;
      background-color: #545c63;
      border-radius: 10px;
      top: 20%;
      left: 50%;
      margin-left: -350px;
      .title {
        padding: 20px 20px;
        display: flex;
        justify-content: space-between;
        color: #fff;
        span {
          font-size: 20px;
        }
        .icon {
          cursor: pointer;
          width: 22px;
          height: 22px;
          color: #fff;
        }
      }
      .video-js {
        width: 100%;
        height: 400px;
        & > * {
          outline: none;
        }
        .vjs-big-play-button {
          position: absolute;
          left: 50%;
          top: 50%;
          margin-top: -50px;
          margin-left: -50px;
          width: 100px;
          height: 100px;
          border-radius: 50%;
          .vjs-icon-placeholder {
            font-size: 50px;
            line-height: 100px;
          }
        }
        .vjs-control-bar {
          & > * {
            outline: none;
          }

          .vjs-volume-panel {
            button {
              outline: none;
            }
          }
          .vjs-picture-in-picture-control {
            display: none;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1200px) and (min-width: 992px) {
}
@media screen and (max-width: 992px) and (min-width: 768px) {
}
@media screen and (max-width: 768px) and (min-width: 576px) {
}
@media screen and (max-width: 576px) {
  .preview-crouse {
    position: fixed;
    z-index: 999;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    .video-container {
      margin: 0 auto;
      width: 100%;
      height: 100%;
      background-color: #545c63;
      .title {
        padding: 20px 20px;
        display: flex;
        justify-content: space-between;
        color: #fff;
        span {
          font-size: 20px;
        }
        .icon {
          cursor: pointer;
          width: 22px;
          height: 22px;
          color: #fff;
        }
      }
      .video-js {
        width: 100%;
        height: 400px;
        & > * {
          outline: none;
        }
        .vjs-big-play-button {
          position: absolute;
          left: 50%;
          top: 50%;
          margin-top: -50px;
          margin-left: -50px;
          width: 100px;
          height: 100px;
          border-radius: 50%;
          .vjs-icon-placeholder {
            font-size: 50px;
            line-height: 100px;
          }
        }
        .vjs-control-bar {
          & > * {
            outline: none;
          }

          .vjs-volume-panel {
            button {
              outline: none;
            }
          }
          .vjs-picture-in-picture-control {
            display: none;
          }
        }
      }
    }
  }
}
</style>